<template>
  <div class="login-box" >
    <div class="topTitle">哈尔滨太平国际机场二期扩建工程</div>
    <div class="topTitle1">北京佳和数字化综合管理平台</div>
    <div class="rightText">泰安数字工程出品</div>

    <div class="login-form-box">
      <a-image :width="75" :height="65" :src="logo" :preview="false" style="margin-top: 48px"/>
      <span class="title-text">{{ companyShortName }}</span>

      <a-form
          ref="formRef"
          layout="vertical"
          :model="formState"
          :rules="rules">
        <a-form-item label="用户名" >
          <a-input v-model:value="formState.user" placeholder="用户名" >
            <template #prefix><a-image :src="userPro" :preview="false"/></template>
          </a-input>
        </a-form-item>
        <a-form-item label="密码"  >
          <a-input-password v-model:value="formState.password" type="password" placeholder="密码">
            <template #prefix><a-image :src="passWord" :preview="false"/></template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button
              type="primary"
              html-type="submit"
              @click="login"
              :disabled="formState.user === '' || formState.password === ''">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
import config from "@/config/index"
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, ref, computed, onMounted } from 'vue';
import axios from "@/utils/axios";
import qs from 'qs'
import {message} from "ant-design-vue";
import {useStore} from 'vuex';
import {useRouter,useRoute} from 'vue-router'
import logo from "../assets/image/logosd.png"
import userPro from "@/assets/image/userProfile.png"
import passWord from "@/assets/image/password.png"

export default defineComponent({
  setup() {
    const formRef = ref() // 表单操作对象
    const formState = reactive({
      user: '',
      password: '',
    }) // 表单数据模板
    const rules = {
      user:[
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        {
          pattern: /^[^\s]*$/,
          message: '不能包含空格',
          trigger: 'blur',
        }
      ],
      password:[
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        {
          pattern: /^[^\s]*$/,
          message: '不能包含空格',
          trigger: 'blur',
        }
      ]
    } // 表单验证规则
    const judgeCondition:any = ref() // 登录账号所属单位类型
    const unitId:any = ref() // 登录账号所属单位Id
    const unitPlatForm:any = ref() // 登录账号所属单位标识
    const urlPlatForm:any = ref() // 当前页面平台单位标识

    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const login = ()=>{
      // formRef.value.validate().then(()=>{
      //   axios.post("/token/searchForUser",
      //       qs.stringify({
      //         "userName": formState.user,
      //         "password": formState.password
      //       }),{
      //         headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      //       }).then((res:any)=>{
      //     if(res.success){
      //     }else{
      //       message.info("登录失败,请确认用户名或密码是否正确")
      //     }
      //   })
      // })

      loginPage().then((res:any)=>{
        judgment(res.data.token).then(()=>{
          if (!judgeCondition.value) {
            // 没有绑定单位账号
            message.info("该账户暂未绑定单位，请绑定后登录")
          } else if (judgeCondition.value < 99 && judgeCondition.value != 6) {
            // 业主、 监理、 三检
            message.info("没有该账户，请确认账号是否输入正确")
          } else if (judgeCondition.value == 6) {
            // 数字化
            let redirect = JSON.stringify(route.query) === '{}' ? "/" : <string>route.query.redirect
            router.push(redirect)
          } else if (judgeCondition.value >= 99) {
            // 施工单位
            testAndVerify().then(()=>{
              if (unitPlatForm.value == urlPlatForm.value) {
                let redirect = JSON.stringify(route.query) === '{}' ? "/" : <string>route.query.redirect
                router.push(redirect)
              } else {
                message.info("没有该账户，请确认账号是否输入正确")
              }
            })
          }
        })
      })
    };
    // 登录
    const loginPage = () =>{
      return new Promise((resolve, reject)=>{
        formRef.value.validate().then(()=>{
          axios.post("/token/searchForUser",
              qs.stringify({
                "userName": formState.user,
                "password": formState.password
              }),
              {
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
              }).then((res:any)=>{
            if (res.success) {
              let userinfo = {
                username: res.data.userName,
                token: res.data.token,
                section: res.data.section
              }
              console.log("登录平台")
              store.commit("userinfo/setUserInfo",userinfo)
              resolve(res)
            } else {
              message.info("登录失败,请确认用户名或密码是否正确")
              reject(false)
            }
          })
        })
      })
    }
    // 平台登录验证
    const  judgment = (token:any)=>{
      return new Promise((resolve, reject)=>{
        axios.get('https://zhihuigongdi.cn:6033/isLogin/',
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'token': token
              }
            }).then((res:any)=>{
          if (res.code == 0) {
            judgeCondition.value = res.data.companyType
            unitId.value = res.data.cID
            resolve(res)
          } else {
            reject(false)
          }
        })
      })
    }
    // 账号与平台是否一致
    const testAndVerify = ()=>{
      return new Promise((resolve, reject)=>{
         // const url = 'https://zhihuigongdi.cn:6033/companyPlatform/' + '?fcID=e0e1632a-47b0-11ed-b6f2-0242ac1f0011'
        const url = 'https://zhihuigongdi.cn:6033/companyPlatform/' + '?fcID=' + unitId.value
        axios.get(url, {
          headers: {'Content-Type': 'application/x-www-form-urlencoded',},
        }).then((res:any)=>{
          if (res.length > 0) {
            unitPlatForm.value = res[0].platFormFlag
            resolve(res)
          } else if (res.length == 0) {
            unitPlatForm.value = undefined
            resolve(res)
          }
        })
      })
    }
    // 获取当前页面网址
    const getCurrentPageUrl = ()=>{
      let pathname = window.location.pathname
      urlPlatForm.value = pathname.replace(/\//g,'')
      // urlPlatForm.value = '/haerbin-hbjs/'.replace(/\//g,'')
    }

    onMounted(()=>{
      getCurrentPageUrl()
    })

    return {
      formRef,
      formState,
      rules,
      login,
      logo,
      userPro,
      passWord,
      companyShortName: config.companyName,
      loginTitle: config.loginTitle,

      judgeCondition,
      unitId,
      unitPlatForm,
      urlPlatForm,
      loginPage,
      judgment,
      testAndVerify,
      getCurrentPageUrl,
    };
  },
  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>

<style lang="scss" scoped>

.login-box {
  width: 1919px;
  height: 937px;
  background: url("../assets/image/background_pic.png") center no-repeat;
  .topTitle {
    position: absolute;
    top: 48px;
    left: 660px;
    font-size: 40px;
    font-weight: 600;
    font-family: 阿里巴巴普惠体 Heavy;
    color: #1677FF;
    line-height: 67px;
  }
  .topTitle1{
    //   position: absolute;
    // top: 104px;
    // left: 726px;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    margin-top: 108px;
    font-family: 阿里巴巴普惠体 Heavy;
    color: #1677FF;
    font-weight: 600;
  }
  .login-form-box {
    width: 608px;
    height: 564px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 2px 16px 0px rgba(6,80,185,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 195px;
    left: 656px;
    flex-direction: column;
    .title-text {
      font-size: 30px;
      font-weight: 600;
      color: #061B48;
      margin-top: 65px;
    }
    ::v-deep .ant-form {
      margin-top: 32px;
    }

    ::v-deep .ant-form-item-control {
      width: 480px;
      height: 64px;
    }

    ::v-deep .ant-input-affix-wrapper {
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      border: 1px solid rgba(151, 151, 151, 1);

      span {
        font-size: 22px;
      }
    }
    ::v-deep .ant-input {
      background: rgba(255,255,255,0.1);
    }
    ::v-deep .ant-input-password-icon {
      color: rgba(151, 151, 151, 1)
    }
    ::v-deep .ant-btn-primary {
      width: 100%;
      height: 100%;
      border-radius: 2px;
      background:  #1677FF;;
      //font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      border: 1px solid  #1677FF;
      font-weight: bold;
      color: #979797;
      line-height: 40px;
      span {
        color: #FFFFFF;
      }
    }
  }
  .rightText {
    font-size: 12px;
    font-family: 平方-简  中黑体;
    color: #041733;
    opacity: 0.4;
    position: absolute;
    text-align: center;
    user-select: none;
    bottom: 32px;
    left: 912px;
  }
}

</style>
